<template>
    <div id="index-page">
        <div class="container">
            <div class="shadow-layout"></div>
            <div class="bg"></div>
            <div class="time-tips">
                <h1>{{ time }}</h1>
                <p>Your potential is unlimited.</p>
            </div>
            <div class="weather" v-if="weather && weather.weatherinfo">
                <Icon size="25" color="#fff" :type="weatherMap[weather.weatherinfo.weather]"></Icon>
                <strong>{{ weather.weatherinfo.temp }}</strong>
                <p>{{ weather.weatherinfo.cityname }}</p>
            </div>
        </div>
        <ul class="footer-nav">
            <li @click="$router.push({name: 'upload'})">
                <Icon size="40" color="#666" type="md-cloud-upload" />
                <p>上传</p>
            </li>
            <li @click="$router.push({name: 'base64'})">
                <Icon size="40" color="#666" type="md-swap" />
                <p>BASE64</p>
            </li>
            <li @click="$router.push({name: 'compress'})">
                <Icon size="40" color="#666" type="ios-construct" />
                <p>压缩</p>
            </li>
            <li @click="$router.push({name: 'more'})">
                <Icon size="40" color="#666" type="ios-more" />
                <p>MORE</p>
            </li>
        </ul>
    </div>
</template>

<script>
    import { ipcRenderer } from 'electron';
    import utils from '../utils/utils';

    export default {
        name: 'index',
        data() {
            return {
                time: '22:00:00',
                timer: null,
                weather: {},
                weatherMap: {
                    '晴': 'md-sunny',
                    '多云': 'ios-partly-sunny',
                    '阴': 'md-cloud',
                    '阵雨': 'ios-rainy',
                    '雷阵雨': 'ios-thunderstorm',
                    '雷阵雨伴有冰雹': 'md-snow',
                    '雨夹雪': 'md-snow',
                    '小雨': 'ios-rainy',
                    '中雨': 'ios-rainy',
                    '大雨': 'ios-rainy',
                    '暴雨': 'ios-rainy',
                    '大暴雨': 'ios-rainy',
                    '特大暴雨': 'ios-rainy',
                    '雾': 'md-cloud',
                    '小到中雨': 'ios-rainy',
                    '中到大雨': 'ios-rainy',
                    '大到暴雨': 'ios-rainy',
                    '暴雨到大暴雨': 'ios-rainy',
                    '大暴雨到特大暴雨': 'ios-rainy',
                    '无': 'ios-rainy-outline',
                    '浓雾': 'md-cloud',
                    '强浓雾': 'md-cloud',
                    '重度霾': 'md-cloud',
                    '严重霾': 'md-cloud',
                    '大雾': 'md-cloud',
                    '雨': 'ios-rainy',
                    '雪': 'md-snow',
                }
            };
        },
        methods: {
            getNowTime() {
                const date = new Date();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                return `${date.getHours()}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? (`0${seconds}`) : seconds}`;
            },
        },
        created() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
            this.time = this.getNowTime();

            // 获取天气预报信息
            ipcRenderer.send('bindRenderInitEvent', 'getWeather');
            ipcRenderer.on('bindRenderChangeWeather', (event, data) => {
                const parseObj = utils.toJson(data);
                this.weather = parseObj.status === 'ok' ? parseObj.data : {};
            });
        },
        mounted() {
            // 计算当前时间，并且设置一个定时器给
            this.timer = setInterval(() => {
                this.time = this.getNowTime();
            }, 1000);
        },
    };
</script>

<style lang="scss" scoped>
    @import '@/assets/css/global.scss';
    #index-page{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .container{
            position: relative;
            z-index: 1;
            @extend ._abs-center;
            width: 100%;
            flex: 1;
            .shadow-layout{
                position: absolute;
                z-index: 2;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.2);
            }
            .bg{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                filter: blur(2px);
                transform: scale(1.1);
                background: url("../assets/default_bg.jpg") center / cover no-repeat;
            }
            .time-tips{
                position: relative;
                z-index: 3;
                @extend ._abs-center-column;
                >h1{
                    color: #fff;
                    font-weight: bold;
                    font-size: 700%;
                }
                >p{
                    color: #fff;
                    font-size: 40px;
                    font-weight: bold;
                    line-height: 1;
                }
            }
            .weather{
                position: absolute;
                top: 30px;
                right: 30px;
                z-index: 3;
                color: #fff;
                p{
                    text-align: center;
                    font-size: 12px;
                    line-height: 1;
                }
            }
        }
        .footer-nav{
            @extend ._abs-center;
            position: relative;
            z-index: 2;
            height: 110px;
            background: #f6f6f9;
            box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
            li{
                flex: 1;
                padding: 5px 50px;
                border-right: 1px solid #e6e6e6;
                text-align: center;
                cursor: pointer;
                >i{
                    transition: all 0.25s;
                }
                p{
                    margin-top: 10px;
                    font-size: 12px;
                    color: #929297;
                    transition: all 0.25s;
                }
            }
            li:last-child{
                border-right: none;
            }
            li:hover{
                >i{
                    color: #121212 !important;
                }
                p{
                    color: #666;
                    font-weight: bold;
                }
            }
        }
    }
</style>
